<template>
	<Popup
		class="login-age"
		title="请选择年龄"
		btnText="下一步"
		@clickBtn="onclickNext"
		@close="$emit('close')"
	>
		<div class="age-range">
			<div
				class="center"
				v-for="item in ageRange"
				:key="item.value"
				@click="selectAge=item.value"
			>
				<Button
					:class="selectAge === item.value ? 'active' : ''"
					bgColor="#EFF3F3"
					width="220"
					height="200"
				>
					<p>{{item.label}}</p>
				</Button>
			</div>
		</div>
	</Popup>
</template>

<script>
export default {
  data() {
    return {
      ageRange: [
        { label: '7-10岁', value: 'child' },
        { label: '11-14岁', value: 'younger' },
      ],
      selectAge: ''
    }
  },
  methods: {
    onclickNext() {
      if (this.selectAge) {
        /* 选择年龄也是改变role */
        this.$emit('nextStep', { role: this.selectAge })
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.login-age {
  .age-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 32px;
    padding: 0 34px;
    margin-top: 62px;

    p {
      font-size: 34px;
      color: $primary1;
    }

    .active {
      border: 3px solid $primary2;
    }
  }
}
</style>
